(() => {
  const saveData = Data => localStorage.setItem('todolist', JSON.stringify(Data))
  const getData = () => JSON.parse(localStorage.getItem('todolist')) || []
  const renderer = () => {
    const Data = getData()
    const OkData = Data.filter(item => item.done)
    const NoData = Data.filter(item => !item.done)
    const OkStr = OkData.map((item, index) => `
      <li data-id=${index + 1 * 200}> 
          <input type="checkbox" checked }>
          <p>${item.title}</p> 
          <a href="javascript:;"></a>
      </li>
    `).join('')
    document.querySelector('#donelist').innerHTML = OkStr
    const NoStr = NoData.map((item, index) => `
      <li data-id=${index + 1}> 
          <input type="checkbox"}>
          <p>${item.title}</p> 
          <a href="javascript:;"></a>
      </li>
    `).join('')
    document.querySelector('#todolist').innerHTML = NoStr
  }
  renderer()

  const title = document.querySelector('[type="text"]')
  title.addEventListener("keyup", e => {
    if (e.key === 'Enter') {
      if (title.value.trim() === '') return alert('请先输入内容')
      const Data = getData()
      const obj = new Object()
      obj.title = title.value
      obj.done = true
      title.value = ''
      Data.unshift(obj)
      saveData(Data)
      renderer()
    }
  })
  // console.log(document.querySelector('section'))
  document.querySelector('#donelist').addEventListener('click', e => {
    if (e.target.tagName === 'INPUT') {
      // console.log(e.target.parentNode)
      const Data = getData()

      for (const [index, item] of Data.entries()) {
        console.log(item)
      }
    }
  })


})()
